<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-08-09 15:52:38
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-08-09 16:35:22
 * @FilePath: \vue学习\vue_basic\05_MVVM模型\Vue中的MVVM.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>理解MVVM</title>
   <!-- 引入Vue -->
   <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>   
</head>
<body>
    <!-- 
			MVVM模型  
						1. M：模型(Model) ：data中的数据
						2. V：视图(View) ：模板代码
						3. VM：视图模型(ViewModel)：Vue实例
			观察发现：
						1.data中所有的属性，最后都出现在了vm身上。
						2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
		-->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>名字：{{name}}</h1>
        <h1>地址：{{address}}</h1>
        <!-- <h1>测试一下1：{{1+1}}</h1>
			<h1>测试一下2：{{$options}}</h1>
			<h1>测试一下3：{{$emit}}</h1>
			<h1>测试一下4：{{_c}}</h1> -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;  // 阻止 vue 在启动时生成生产提示。
    
    // 创建Vue实例
    new Vue({
        el: '#root',
        data: {
           name:'张三',
           address:'云南'
        }
    })
</script>
</html>